﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <script src="./js/flexible.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <header>
        <div class="dingbu texa">
            <img src="./images/返回.png" alt="">
            <span class="bt">商品列表</span>
        </div>
    </header>
    <!-- 顶部结束 -->

    <section>
        <div class="shang-pin">
            <img class="banner" src="./images/shangpin.png" alt="">
        </div>
        <div class="box">
            <div class="cuxiao">
                <img src="./images/组 16.png" alt="">莫次有机PWE活性美白洗面奶
            </div>
            <div class="qian">
                <span class="jq">￥169 <del class="qq">220</del></span>
                <span class="you">买够200元包邮</span>
            </div>
            <div class="xian"></div>
            <div class="guige">
                <span class="zg">规格</span>
                <span class="yb">标准 <img src="./images/跳转.png" alt=""></span>
            </div>
        </div>

        <div class="xiang-qing"></div>
        <div class="xiang-qing1">
            <ul class="dispfx flx-spb">
                <li class="xq">详情</li>
                <li>评价</li>
                <li class="sh">售后</li>
            </ul>
        </div>

        <div class="shang-P">
            <img src="./images/详情.png" alt="">
        </div>
    </section>

    <!-- 底部任务栏 -->
    <footer class="dispfx">
        <div class="zuo">
            <ul class="dispfx flx-spb flx-hc texa">
                <li><img src="./images/客服.png" alt="">
                    <div>客服</div>
                </li>
                <li>
                    <img src="./images/收藏.png" alt="">
                    <div>收藏</div>
                </li>
            </ul>
        </div>
        <div class="zhong">加入购物车</div>
        <div class="you">立即购买</div>
    </footer>

    <!-- 购物车 -->
    <div class="gouwu">
        <img src="./images/购物车.png" alt="">
    </div>
</body>

</html>